<template>
    <div class="my-avater">
        <a-upload
            name="file"
            ref="uploader"
            accept="image/*"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="upload.action"
            :headers="upload.headers"
            :data="upload.data"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
            <div class="mask-img" v-if="imageUrl">
                <img :src="imageUrl" alt="avatar" class="show-list" />
                <div :class="{mask:!isMobile,'mt-mask':isMobile}">
                    <svg-icon icon-class="upload" class-name="upload" />
                </div>
            </div>
            <div v-else class="icon">
                <svg-icon icon-class="default-avater" />
                <svg-icon icon-class="upload" class-name="upload" />
            </div>
        </a-upload>
    </div>
</template>

<script>
import SvgIcon from '@/components/MySvgIcon/index.vue'
import Core from '@/core'
function getBase64(img, callback) {
    const reader = new FileReader()
    reader.addEventListener('load', () => callback(reader.result))
    reader.readAsDataURL(img)
}
export default {
    components: {
        SvgIcon,
    },
    props: {
        avatar: {
            type: String,
            default: '',
        },
    },
    computed: {
      isMobile() {
            return this.$store.state.app.isMobile
        },
    },
    data() {
        return {
            imageUrl: '',
            upload: {
                action: import.meta.env.VITE_URL_POINT + '/file/file-upload',
                headers: {
                    ContentType: false,
                },
                data: {
                    token: Core.Data.getToken(),
                    type: 'file',
                },
            },
        }
    },
    watch: {
        avatar: {
            handler(val) {
                console.log('传递的数据', val)
                this.imageUrl = !val ? '' : import.meta.env.VITE_OSS_POINT + val
            },
            immediate: true,
        },
    },
    methods: {
        handleChange(info) {
            if (info.file.status === 'done') {
                // 将图片的地址传递给父组件
                console.log(info)
                this.$emit('handleAvater', info.file.response.data.filename)
                getBase64(info.file.originFileObj, imageUrl => {
                    this.imageUrl = imageUrl
                })
            }
        },
        beforeUpload(file) {
            console.log(file)
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
            if (!isJpgOrPng) {
                this.$message.error('You can only upload jpeg ro png file!')
            }
            return isJpgOrPng
        },
    },
}
</script>

<style lang="less" scoped>
::v-deep .ant-upload {
    width: 80px !important;
    height: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: none !important;
    background-color: transparent !important;
    .icon {
        width: 100%;
        height: 100%;
        font-size: 80px;
        position: relative;
        .upload {
            position: absolute;
            bottom: 50%;
            right: 50%;
            color: #fff;
            font-size: 24px;
            transform: translate(50%, 50%);
            z-index: 999;
            // 设置svg的颜色
            svg {
                fill: #fff;
            }
        }
    }
    .mask-img {
        position: relative;
        width: 80px;
        height: 80px;
        .show-list {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 24px;
            display: none;
            align-items: center;
            justify-content: center;
        }
        &:hover {
            .mask {
                display: flex;
            }
        }
    }
}
</style>
